<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>

</body>
<script>
    let webSocket = null;   // 创建一个变量
    if ('WebSocket' in window) {  // 判断当前的浏览器是否支持WebSocket
        // 如果支持则创建一个WebSocket赋值给刚才创建的变量
        // 后面的路径实际上就是一次请求，但是这里用的是WebSocket协议
        // 记住这个地方后面详细讲到怎么写
        webSocket = new WebSocket('ws://127.0.0.1:9090/msgWebsocket/zhangsang');
    } else {  // 如果不兼容则弹框，该浏览器不支持
        alert('该浏览器不支持')
    }

    /** 
     * 当WebSocket创建连接(初始化)会触发该方法
     */
    webSocket.onopen = function (event) {
        console.log('建立连接') // 这个代表在浏览器打印日志，跟Java的System.out.println()意思一致
    }

    /** 
     * 当WebSocket关闭时候会触发该方法
     */
    webSocket.onclose = function (event) {
        console.log('关闭连接') // 同上
    }

    /** 
    * 当WebSocket接受消息会触发该方法
    */
    webSocket.onmessage = function (event) {
        console.log('收到消息：' + event.data)
    }

    /** 
     * 当WebSocket连接出错触发该方法
     */
    webSocket.onerror = function (event) {
        console.log('websocket发生错误');
    }

    /** 
     * 页面关闭，WebSocket关闭
     */
    window.onbeforeunload = function () {
        webSocket.close();
    }
</script>

</html>